import React from 'react'
import {
  observer,
  inject,
} from 'mobx-react'
import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'

import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab'
import List from '@material-ui/core/List'
import CircularProgress from '@material-ui/core/CircularProgress'

import queryString from 'query-string'

// import AppState from '../../store/app-state'
import Container from '../layout/container'

import TopicListItem from './list-item'
import { tabs } from '../../util/variable-define'

@inject((stores) => {
  return {
    // appState: stores.appState,
    topicStore: stores.topicStore,
  }
}) @observer

class TopicList extends React.Component {
  constructor() {
    super()
    this.changeTab = this.changeTab.bind(this)
    this.listItemClick = this.listItemClick.bind(this)
  }

  componentDidMount() {
    const tab = this.getTab()
    this.props.topicStore.fetchTopics(tab)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.location.search !== this.props.location.search) {
      this.props.topicStore.fetchTopics(this.getTab(nextProps.location.search))
    }
  }

  getTab(search) {
    const se = search || this.props.location.search
    const query = queryString.parse(se)
    return query.tab || 'all'
  }

  bootstrap() {
    console.log('执行了bootstrap方法')
    const tab = this.getTab()
    return this.props.topicStore.fetchTopics(tab).then((data) => {
      console.log('bootstrap方法请求到数据啦：', data)
      return true
    }).catch(() => {
      console.log('bootstrap方法请求报错啦')
      return false
    })
  }

  changeTab(e, value) {
    this.props.history.push({
      pathname: '/list',
      search: `tab=${value}`,
    })
  }

  listItemClick(topic) {
    this.props.history.push(`/detail/${topic.id}`)
  }

  render() {
    const {
      topicStore,
    } = this.props
    const topicList = topicStore.topics
    const syncingTopics = topicStore.syncing
    const tab = this.getTab()

    return (
      <Container>
        <Helmet>
          <meta charSet="utf-8" />
          <meta name="description" content="this my description" />
          <title>My Title</title>
          <link rel="canonical" href="http://mysite.com/example" />
        </Helmet>
        <Tabs value={tab} onChange={this.changeTab}>
          {
            Object.keys(tabs).map((t) => {
              return <Tab key={t} label={tabs[t]} value={t} />
            })
          }
        </Tabs>
        <List>
          {
            /* eslint-disable */
            topicList.map(topic =>
              <TopicListItem
                onClick={() => {this.listItemClick(topic)}}
                topic={topic}
                key={topic.id}
              />)
            /* eslint-enable */
          }
        </List>
        {
          syncingTopics ? (
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-around',
                padding: '40px 0',
              }}
            >
              <CircularProgress color="secondary" size={100} />
            </div>
          ) : null
        }
      </Container>
    )
  }
}

TopicList.wrappedComponent.propTypes = {
  // appState: PropTypes.object.isRequired,
  topicStore: PropTypes.object.isRequired,
}

TopicList.propTypes = {
  location: PropTypes.object.isRequired,
  history: PropTypes.object,
}

export default TopicList
